Skip to content

Fix hyperlink font color in Dark mode - #254

Open
ruokun-niu wants to merge 1 commit into
drasi-project:mainfrom
ruokun-niu:doc-site-dark-mode
Open

Fix hyperlink font color in Dark mode#254
ruokun-niu wants to merge 1 commit into
drasi-project:mainfrom
ruokun-niu:doc-site-dark-mode

Conversation

@ruokun-niu

Copy link
Copy Markdown
Contributor

Description

This pull request improves the accessibility and clarity of hyperlink styles in the documentation's dark mode. It updates the styling for plain prose links to ensure they have sufficient contrast and that visited links are visually distinct from unvisited ones.

Accessibility and link color improvements:

  • Updated .td-content a:not([class]) to use a bright cyan ($accent-cyan) for unvisited links and a soft purple ($accent-purple) for visited links, ensuring AAA contrast and clear differentiation between link states. Hover and focus states are lightened for both colors.
Screenshot 2026-07-17 at 1 42 51 PM

Type of change

  • This pull request fixes a bug in Drasi and has an approved issue (issue link required).
  • This pull request adds or changes features of Drasi and has an approved issue (issue link required).
  • This pull request is a minor refactor, code cleanup, test improvement, or other maintenance task and doesn't change the functionality of Drasi (issue link optional).

Fixes: #244

Signed-off-by: Ruokun Niu <ruokunniu@microsoft.com>

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Updates the documentation theme’s dark mode styling to improve readability and accessibility of in-content (“prose”) hyperlinks by increasing contrast and clearly differentiating visited vs. unvisited states.

Changes:

  • Add a dark-mode rule for .td-content a:not([class]) to use $accent-cyan for unvisited links and $accent-purple for visited links.
  • Add hover/focus variants for both unvisited and visited states using lighten(...).

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Drasi.io: Hyperlink font color in Dark mode isn't high contrast. Visited link color isn't distinct from unclicked link.

3 participants